import React, { useState } from 'react';
import { Modal, Button,Divider,Form, Input, message } from 'antd';
import {LoadUserOneActionAsync} from '../../../redux/action/userAction'
import service from '../../../service/index.js'
import {getLoginToken} from '../../../common/Auth.js'
import {connect} from 'react-redux'
function Safe_Set(props) {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [passwordForm]=Form.useForm()
  React.useEffect(()=>{
    props.LoadUserOneActionAsync({key:getLoginToken()})
  },[])
  const ok = async()=>{
    const fieldsValue=await passwordForm.validateFields()
    if(fieldsValue.password1===fieldsValue.password2){
      let data = {...props.userOne,password:fieldsValue.password1}
      service.updateUser(data).then((res)=>{
        message.success('修改成功')
      })
    }
    else{
      message.info('两次密码输入结果不同')
    }
    setIsModalVisible(false)
  }
  return (
    <div style={{margin:' 0 10px'}}>
      <h2 style={{marginBottom:'20px'}}>安全设置</h2>
      <div>
        账户密码
        <span onClick={()=>{setIsModalVisible(true)}} style={{float:'right',color:'#177bd0',marginRight:'10px',cursor:'pointer'}}>修改</span>
      </div>
      <div style={{color:'#8c8c8c'}}>当前密码强度：强</div>
      <Divider style={{margin:'20px 0'}}/>
      <div>
        密保手机
        <span style={{float:'right',color:'#177bd0',marginRight:'10px',cursor:'pointer'}}>修改</span>
      </div>
      <div style={{color:'#8c8c8c'}}>已绑定手机：{JSON.stringify(props.userOne)!=='{}'?props.userOne.username.slice(0,3):''}****{JSON.stringify(props.userOne)!=='{}'?props.userOne.username.slice(7,11):''}</div>
      <Divider style={{margin:'20px 0'}}/>
      <div>
        备用邮箱
        <span style={{float:'right',color:'#177bd0',marginRight:'10px',cursor:'pointer'}}>修改</span>
      </div>
      <div style={{color:'#8c8c8c'}}>已绑定邮箱：1230***@qq.com</div>
      <Divider style={{margin:'20px 0'}}/>
      <Modal 
        title="修改密码" 
        visible={isModalVisible}
        okText='修改'
        cancelText='取消'
        onOk={ok} 
        onCancel={()=>{setIsModalVisible(false)}}>
        <Form
          name="basic"
          form={passwordForm}
        >
          <Form.Item
            label="输入密码"
            name="password1"
            rules={[
              {
                pattern:/^\w+$/,
                message: '请输入数字字母下划线!',
              },
              {
                required: true,
                message: '请输入你想设置的密码!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          
          <Form.Item
            label="确认密码"
            name="password2"
            rules={[
              {
                pattern:/^\w+$/,
                message: '请输入数字字母下划线!',
              },
              {
                required: true,
                message: '请再次确认你设置的密码!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    userOne:state.userOne
	}),
	{LoadUserOneActionAsync}
)(Safe_Set)
